<template>
  <div style="width: 1050px;display: flex;justify-content: center;align-items: center">
    <div style="width: 950px;margin-top: 50px;margin-bottom: 50px;">
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between"> <!--这是显示具体地址的选择框-->
        <address-block
          @clickadsblock="clickAdsBlock($event)"
          :if-can-cli="ifCanCli"
          @updateicon="clickAdsUpdateIcon($event)"
          @deleteicon="clickDeleteAdsIcon($event)"
          v-for="item in content"
          :content="item"
          :ads-block-height="adsBlockHeight"
          :ads-block-wdith="adsBlockWdith"/>
        <address-block @showupdate="showUpdateTier()" :ads-block-wdith="adsBlockWdith" :ads-block-height="adsBlockHeight" :content="{isNewAdd: true}"/>
      </div>
      <div v-if="ifShowUpdate" style="background-color: white;width: 100%;height: 300px;border-top: #e7e7e7 solid 1px"><!--这是添加地址层，后期可修改为组件-->
        <el-form ref="form" :model="form" label-width="80px">
          <div style="margin-top: 25px;">
            <div style="margin-bottom: 20px;">
              <el-input style="width: 250px;margin-right: 20px;" v-model="formVal.contName" placeholder="姓名" clearable></el-input>
              <el-input style="width: 250px;" v-model="formVal.contPhone" placeholder="电话" clearable></el-input>
            </div>
            <div style="margin-bottom: 20px;">
              <el-cascader
                size="large"
                :options="options"
                v-model="formVal.areaAdress" :show-all-levels="true" style="width: 520px;" clearable>
              </el-cascader>
            </div>
            <div style="margin-bottom: 20px;">
              <el-input style="width: 520px;" placeholder="详细地址" v-model="formVal.careAdress" clearable></el-input>
            </div>
            <div style="margin-bottom: 20px;">
              <el-checkbox v-model="formVal.selectStatus">设为默认地址</el-checkbox>
            </div>
            <div style="display: flex">
              <submit-button @click="clickUpdateAdsCancel()" style="margin-right: 20px;" button-height="45" button-back-color="#f4f4f4" button-font-color="#7c7d7c" text-msg="取消"/>
              <submit-button @click="clickAddAddress()" button-height="45" button-back-color="#7e7d7d" button-font-color="white" text-msg="确认"/>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import AddressBlock from "./AddressBlock";

  import SubmitButton from "../detailPage/SubmitButton";

  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

  import {mapActions,mapGetters} from "vuex"

  import ShippingAddress from "../../../store/modules/address/ShippingAddress";

  import {requestUpdateShippingAdsMsg,requestAddShippingAdsMsg,requestDeleteShippingAdsMsg} from "../../../network/home";

  export default {
    name: "SetAddressChild",
    components: {
      AddressBlock,
      SubmitButton
    },
    props: {
      contentVal: {
        type: Object
      },
      ifCanClick: {//地址块是否能点击
        type: Boolean,
        default: false
      },
      adsBlockWdith: {
        type: Number,
        default: 460,
      },
      adsBlockHeight: {
        type: Number,
        default: 160,
      }
    },
    watch: {
      contentVal(newVal,oldVal){
        this.content = newVal;
      },
      ifCanClick(newVal,oldVal){
        this.ifCanCli = newVal;
      }
    },
    data(){
      return {
        options: regionData,
        content: this.contentVal,
        formVal: {
          contName: "",
          contPhone: "",
          areaAdress: [],
          careAdress: "",
          selectStatus: false,
          isNewAdd: false
        },
        ifShowUpdate: false,
        ifCanCli: this.ifCanClick,//地址块是否能点击
      }
    },
    computed:{
      ...mapGetters({
        getDataById: "ShippingAddress/getDataById",
        getUserId: "UserMsg/getUserId"
      })
    },
    methods: {
      ...mapActions({
        addNewAds: "ShippingAddress/addNewAds",
        updateAds: "ShippingAddress/updateAds",
        deleteAds: "ShippingAddress/deleteAds",
        updateifLL: "ShippingAddress/updateifLL"
      }),
      clickAdsBlock(event){//点击地址块，将当前选中你的地址编号发送出去，并且清空地址块中的常亮状态
        this.$emit("sendadsid",event.adressMsgId);
        //调用方法使所有的选中状态修改为false
        this.updateifLL();
      },
      clickDeleteAdsIcon(event){//点击删除地址
        this.deleteAds(event);//删除地址
        requestDeleteShippingAdsMsg(event,this.getUserId)
          .then(data => {
            if (data) this.$message.success("删除成功！"); else this.$message.error("删除失败！");
            //发送事件给父组件，让显示的数据及时更新
            this.$emit("updatedataemit")
          })
      },
      clickAddAddress(){//点击添加地址的确认按钮:此时有两种状态，一种是添加新地址，一种是修改地址，其中修改地址是带有地址编号的
        let temp = {...this.formVal};
        temp.areaAdress = [...this.formVal.areaAdress]//这里为什么赋值给temp要分别赋值两次呢，是因为对象虽然避开了深拷贝的问题，但是对象当中的数组仍然是深拷贝，所以我们要对这个数组也进行浅拷贝
        temp.selectStatus = temp.selectStatus ? 1 : 2;//修改选择状态，从布尔值改为数字
        for (let i = 0; i < temp.areaAdress.length; i++) {
          temp.areaAdress[i] = CodeToText[temp.areaAdress[i]];
        }
        //判断是否带有编号，如果带有编号则修改，如果没有编号则添加
        if (temp.adressMsgId){
          this.updateAds(temp);
          temp.areaAdress = `${temp.areaAdress[0]},${temp.areaAdress[1]},${temp.areaAdress[2]}`
          requestUpdateShippingAdsMsg(temp,this.getUserId)
            .then(data => {
              if (data) this.$message.success("修改成功！"); else this.$message.error("修改失败！");
              this.ifShowUpdate = false;//收起修改框
              //发送事件给父组件，让显示的数据及时更新
              this.$emit("updatedataemit")
            })
        }else {
          //将对象添加到地址数组中
          this.addNewAds(temp);
          temp.areaAdress = `${temp.areaAdress[0]},${temp.areaAdress[1]},${temp.areaAdress[2]}`
          requestAddShippingAdsMsg(temp,this.getUserId)
            .then(data => {
              if (data) this.$message.success("添加成功"); else this.$message.error("添加失败");
              this.ifShowUpdate = false;//收起修改框
              //发送事件给父组件，让显示的数据及时更新
              this.$emit("updatedataemit")
            })
        }
      },
      showUpdateTier(){//显示修改层的方法:点击新增地址
        //清空层中原有数据
        let temp = {
          contName: "",
          contPhone: "",
          areaAdress: [],
          careAdress: "",
          selectStatus: false,
          isNewAdd: false
        }
        //将空值赋值给输入框
        this.formVal = temp;
        this.ifShowUpdate = true;
      },
      clickUpdateAdsCancel(){//点击取消按钮则隐藏层
        this.ifShowUpdate = false;
      },
      clickAdsUpdateIcon(adressMsgId){//点击修改地址的图标
        let datas = {...this.getDataById(adressMsgId)};
        datas.selectStatus = datas.selectStatus == 1 ? true : false;
        //将地区汉字转换为地址码
        datas.areaAdress =
          [TextToCode[datas.areaAdress[0]].code,
            TextToCode[datas.areaAdress[0]][datas.areaAdress[1]].code,
            TextToCode[datas.areaAdress[0]][datas.areaAdress[1]][datas.areaAdress[2]].code];
        //将地区汉字转换为地址码
        this.formVal = datas;//将取出的值赋值给输入框
        //展开输入框层
        this.ifShowUpdate = true;
      }
    }
  }
</script>

<style scoped>

</style>
